<template>
    <div id="olddeliver" class="bgGrayf8" v-cloak>
        <Header :goback="goback" :title="header_title"></Header>
        <div class="topheader">
            <van-tabs color="#428FFC" :active="active" @click-tab="changetab">
                <van-tab v-for="(item, i) in tab_nav" :key="i" :name="i" :title="item.text">
                    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
                        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="loadlist" :immediate-check="false" :offset='60'>
                            <div class="textL" v-for="(itm, i) in list"  :key="i">
                                <div class="timeCon font40 fontBlack73">{{itm.time}}</div>
                                <div class="bgWhite ts_content" v-for="(item, key) in itm.list" @click="todetail(item)">
                                    <div>
                                        <div class="disFlex">
                                            <span class="font42">{{item.postName}}</span>
                                            <span class="tip ts_tip font36" v-if="item.match == '非常匹配'">非常匹配</span>
                                            <span class="tip ts_tip1 font36" v-else>匹配</span>
                                        </div>
                                        <div class="font40 fontGreenBlue">{{item.postSalary}}</div>
                                    </div>
                                    <div class="gs font40">{{item.companyName}}</div>
                                    <div class="disFlex flex_start">
                                        <span class="bgGrayec font36 fontBlack2 pd">{{item.ageRequire}}</span>
                                        <span class="bgGrayec font36 fontBlack2 pd">{{item.educationalRequire}}</span>
                                        <span class="bgGrayec font36 fontBlack2 pd">{{item.recruitNum}}人</span>
                                    </div>
                                    <div class="disFlex mt18">
                                        <div class="disFlex">
                                            <img class="list_icon" :src="require('@/assets/images/avatar.png')" alt="">
                                            <span class="font40 fontBlack73">{{item.contactPerson}}</span>
                                        </div>
                                        <div class="disFlex">
                                            <img class="list_icon" :src="require('@/assets/images/phone-telephone.png')" alt="">
                                            <span class="font36 fontBlack73">{{item.contactPhoneNumber}}</span>
                                        </div>
                                    </div>
                                    <div class="address">
                                        <img class="list_icon" :src="require('@/assets/images/local.png')" alt="">
                                        <span class="font40 fontBlack73">{{item.address}}</span>
                                    </div>
                                </div>
                            </div>
                        </van-list>
                    </van-pull-refresh>
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>
<script>

import Header from '@/components/oldheader.vue'
import { Toast } from 'vant';
import { getCurrentInstance,reactive } from 'vue'
export default {
    components: {
        Header
    },
    data() {
        return {
            header_title: '投递列表',
            tab_nav: [{
                text: '已投递',
                _id: 0
            },{
                text: '面试中',
                _id: 1
            },{
                text: '不合适',
                _id: 4
            },{
                text: '已录用',
                _id: 2
            },{
                text: '已入职',
                _id: 3
            }],
            list: [],
            active: 0,
            pageNum: 1,
            isLoading: false, //下拉刷新
            //加载
            loading: false,
            finished: false,
            total: 0,
            api: '',
            token: '',
            idcard: ''
        }
    },
    created() {
        this.token = this.$store.state.token;
        this.idcard = this.$store.state.idCard;
        this.api = getCurrentInstance().appContext.config.globalProperties.$http;
        this.getData();
    },
    methods: {
        loadlist() {
            this.pageNum++;
            this.getData();
        },
        goback() {
            this.$router.replace('/oldhome');
        },
        // 重新加载
        onRefresh() {
            var that = this;
            that.list = [];
            that.pageNum = 1;
            that.finished = false;
            that.loading = true;
            that.getData();
        },
        getData(){
            // var list = this.$store.state.deliverlist;
            // this.list = list;
            var that = this;
            let _data = {
                pageNum: this.pageNum,
                deliveryStatus: this.tab_nav[this.active]._id,
                identityNumber: that.idcard
            }
            that.api.get('/personnel/h5/deliveryInfo/pageByMember', _data).then(res => {
                if(that.isLoading){
                    that.isLoading = false;
                }
                if(res.data) {
                    var rows = res.data.records;
                    that.loading = false;
                    that.total = res.data.total;
                    if(rows == null || rows.length == 0) {
                        // 加载结束
                        that.finished = true;
                        return;
                    };
                    // 将新老数据合并
                    that.list = that.list.concat(rows);
                    // 如果列表数据条数>=总条数，不再触发滚动加载
                    if(that.list.length >= that.total) {
                        that.finished = true;
                    };
                }
            }).catch(err => {
                if(that.isLoading) {
                    that.isLoading = false;
                }
            })
        },
        changetab(event) {
            this.active = event.name;
            var that = this;
            that.list = [];
            that.pageNum = 1;
            that.finished = false;
            that.loading = true;
            that.getData();
        },
        todetail(item) {
            this.$router.push({
                path: '/olddeliverdetail',
                query: {
                    id: item.id,
                }
            })
        }
    }
}
</script>
<style src="@/assets/css/oldment.css"></style>
<style scoped>
#olddeliver {
    width: 100%;
    height: 100%;
}
.ts_content:not(:last-child){
    margin-bottom: 0.2rem;
}
.pd {
    padding: 0.02rem 0.12rem;
    border-radius: 0.04rem;
}
.timeCon{
    padding: 0.32rem;
}
.list_icon{
    width: 0.48rem;
    height: auto;
    margin-right: 0.16rem;
}
.address{
    margin-top: 0.24rem;
}
.tip {
    font-size: 0.36rem!important;
}
</style>